<template>
  <div class="internal">
    <div class="head border-bottom">
      <div class="head-return" @click="$router.back()">&lt;</div>
      <span class="head-tou">消息详情</span>
    </div>
    <div class="content">
      <p class="content-title">
        <span class="content-notice">系统通知</span>
        <span class="content-item">2021-05-10:34:13</span>
      </p>
      <p class="content-analysis">
        系统升级通知系统升级通知系统升级通知系统升级通知系统升级通知系统升级通知系统升级通知系统升级通知系统升级通知系统升级通知系统升级通知系统升级通知
      </p>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style>
html,
body {
  height: 100%;
  width: 100%;
}
* {
  margin: 0px;
  padding: 0px;
}
.internal {
  background-color: #f2f2f2;
  height: 100%;
  width: 100%;
  position: absolute;
  z-index: 1;
}
</style>

<style lang="scss" scoped>
 @function vw($px) {
   @return ($px/375) * 100vw;
 }
.content {
  margin-top: vw(44);
  background-color: #fff;
  padding-left: vw(20);
  padding-top: vw(10);
  padding-right: vw(10);
  padding-bottom: vw(10);
  box-sizing: border-box;
  .content-title {
    height: vw(20);
    width: 100%;
    // margin-bottom: 10px;
    .content-notice {
      float: left;
      font-family: "微软雅黑 Bold", "微软雅黑";
      font-weight: 700;
      font-style: normal;
      font-size: vw(14);
    }
    .content-item {
      float: right;
      font-family: "微软雅黑";
      font-weight: 400;
      font-style: normal;
      font-size: vw(12);
      color: #999999;
    }
  }
  .content-analysis {
    margin-right: vw(20);

    font-family: "MicrosoftYaHei", "微软雅黑";
    font-weight: 400;
    font-style: normal;
    font-size: vw(12);
    color: #999999;
    line-height: vw(22);
  }
}
</style>
